import React, { useState } from 'react';
import { CouponList, Popup, Toast, CouponCell } from 'react-vant';
import { data, disabledDiscountCoupon, disabledCoupon } from './demo';
import { NavBar, Space, Button } from 'antd-mobile';
import { history } from 'umi';
import { ShareSheet } from 'react-vant';
import { ShareO, WeappNav } from '@react-vant/icons';
const getRandomId = (max = 999999) =>
  String(Math.floor(Math.random() * max) + 1);

export default () => {
  const [coupons, setCoupons] = useState([data, disabledDiscountCoupon]);
  const [disabledCoupons] = useState([disabledCoupon, disabledDiscountCoupon]);
  const [chosenCoupon, setChosenCoupon] = useState(-1);
  const [visible, setVisible] = useState(false);
  const [visible1, setVisible1] = useState(false);
  const onChange = (index) => {
    setVisible(false);
    setChosenCoupon(index);
  };

  const onExchange = (code) => {
    console.log('code: ', code);
    Toast('兑换成功');
    setCoupons((v) => [...v, { ...data, id: getRandomId() }]);
  };
  const back = () => {
    history.goBack();
  };
  const options1 = [
    [
      { name: '微信', icon: 'wechat' },
      { name: '朋友圈', icon: 'wechat-moments' },
      { name: '微博', icon: 'weibo' },
      { name: 'QQ', icon: 'qq' },
    ],
    [
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
      { name: '小程序码', icon: 'weapp-qrcode' },
    ],
  ];
  const right = (
    <div style={{ fontSize: 24 }} onClick={() => setVisible1(true)}>
      <Space style={{ '--gap': '16px' }}>
        <ShareO />
      </Space>
      <ShareSheet
        visible={visible1}
        options={options1}
        title="立即分享给好友"
        onCancel={() => setVisible1(false)}
        onSelect={(option, index) => {
          setVisible1(false);
        }}
      />
    </div>
  );
  return (
    <>
      <NavBar
        onBack={back}
        right={right}
        style={{
          backgroundColor: '#f6f5f6',
          position: ' sticky',
          top: '0',
          zIndex: '99999',
        }}
      >
        优惠券
      </NavBar>
      <CouponCell
        coupons={coupons}
        chosenCoupon={chosenCoupon}
        onClick={() => setVisible(true)}
      />
      <Popup
        round
        position="bottom"
        style={{ height: '90%', paddingTop: 4 }}
        visible={visible}
        onClose={() => setVisible(false)}
      >
        <CouponList
          chosenCoupon={chosenCoupon}
          coupons={coupons}
          disabledCoupons={disabledCoupons}
          onChange={onChange}
          onExchange={onExchange}
        />
      </Popup>
    </>
  );
};
